import React, { useState } from 'react';
//组件通信——子传父:回调函数,在父组件定义一个回调函数,传给子组件，子组件通过props接收

interface SonProps {
  setCount?: React.Dispatch<React.SetStateAction<number>>;
}
const Son: React.FC<SonProps> = (props) => {
  const { setCount } = props;
  const handle = () => {
    if (setCount) {
      setCount((prevCount: number) => prevCount + 1);
    }
  };
  return (
    <>
      <div style={{ width: '100vw', height: '100px', background: 'blue' }}>
        <h1>Son组件</h1>
        <button onClick={handle}>点击+1</button>
      </div>
    </>
  );
};
const Father: React.FC = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <div style={{ width: '100vw', height: '300px', background: 'pink' }}>
        <h1>我是父组件</h1>
        <div>{count}</div>
        <Son setCount={setCount} />
      </div>
    </>
  );
};
export default Father;
